home *** CD-ROM | disk | FTP | other *** search
/ PC Format (PL) 2008 March / PCFormat 3_2008.iso / Multimedia / Miro 1.0 / Miro_Installer.exe / resources / css / main.css < prev    next >
Cascading Style Sheet File  |  2007-11-12  |  24KB  |  1,298 lines
  1. body {
  2.     background: #f4f4f9;
  3.     margin: 0px;
  4.     font-size: 12px;
  5.     font-family: "Lucida Grande", "Tahoma", "Bitstream Vera Sans", Arial, sans-serif;
  6.     color: #333333;
  7. }
  8.  
  9. /* Used in download item exactly as you'd expect */
  10. .draggable {
  11.     -khtml-user-drag: element;
  12. }
  13. .noselect {
  14.     -khtml-user-select: none;
  15.     -moz-user-select: none;
  16.     cursor: default;
  17. }
  18.  
  19. /* basic HTML elements */
  20. p {
  21.     font-size: 90%;
  22.     margin: 5px 10px 7px 10px;
  23. }
  24.  
  25. form {
  26.     margin: 0px;
  27.     padding: 0px;
  28. }
  29.  
  30. ul {    
  31.     list-style: none;
  32.     margin: 0px;
  33.     padding: 0px;   
  34. }
  35.  
  36. li {
  37.     margin: 0px;
  38.     padding: 0px;
  39. }
  40.  
  41. img {
  42.     border: 0px;
  43. }
  44.  
  45. .clear {
  46.     clear: both;
  47. }
  48.  
  49. /* This is used to make the feed settings section float above the channel */
  50. #feed-settings {
  51.     position: fixed;
  52.     top: 90px;
  53.     left: 0px;
  54.     width: 100%;
  55.     display: none;
  56.     background: url(../images/settings-shadow.png) repeat-x left bottom;
  57.     z-index: 5; /* Needs to be float above the main page */
  58.     color: #000;
  59.     font-size: 13px;
  60. }
  61.  
  62.  
  63. #settings-inner {
  64.     padding: 20px 18px 20px 18px;
  65.     background-color: #FFFFBB;
  66.     height: 180px;
  67.     margin-bottom: 4px;
  68. }
  69.  
  70. #settings-inner h2 {
  71.     font-size: 15px;
  72.     margin: 0;
  73.     padding: 12px 0 20px 0;
  74. }
  75.  
  76. #channel-url {
  77.     position: absolute;
  78.     right: 20px;
  79.     top: 20px;
  80.     color: #999;
  81.     font-size: 11px;
  82.     text-align: right;
  83. }
  84.  
  85. #channel-url a.remove-channel {
  86.     color: #f00;
  87. }
  88.  
  89. .settings-small {
  90.     font-size: 10px;
  91.     padding: 3px 0 0 23px;
  92. }
  93.  
  94. .settings-button {
  95.     text-align: center; 
  96.     margin-left: 5px;
  97.     position: absolute;
  98.     bottom: 22px;
  99.     left: 43px;
  100. }
  101.  
  102. /* The block of drop downs and fields */
  103. #actual-settings {
  104.     padding: 0 0 0 25px;
  105. }
  106.  
  107. /* Used in feed-settings to position the feed-settings icon */
  108. #feed-settings-close-button {
  109.     width: 150px
  110. }
  111.  
  112. /* This is the title section of the channel view */
  113. #main-titlebar {
  114.     background: url(../images/main-titlebar-bg.png) repeat-x left top;
  115.     height: 93px;
  116.     width: 100%;
  117.     min-width: 600px;
  118.     margin: 0px 0px 1px 0px;
  119.     position: fixed;
  120.     top: 0px;
  121.     z-index: 6; 
  122.     color: #fff;
  123.     /* This should be above feed-settings, so that feed-settings doesn't cover
  124.      * it up durring the opening animation.  It also needs to be above
  125.      * sort-bar, so the auto-download select menu is above sort-bar.
  126.      */
  127. }
  128.  
  129. /* The icon for the channel view. Usually in the titlebar */
  130. #main-icon {
  131.     position: absolute;
  132.     left: 9px;
  133.     top: 6px;
  134.     width: 76px;
  135.     height: 76px;
  136.     border: 1px solid #FFFFFF;
  137.     background-color:#FFFFFF;
  138. }
  139.  
  140. #main-titlebar .noborder {
  141.     background: none;
  142.     border: none;
  143.     margin: 2px;
  144. }
  145.  
  146. /* This wraps just the name of the view */
  147. #main-title {
  148.     position: absolute;
  149.     left: 98px;
  150.     right: 120px;
  151.     top: 6px;
  152.     height: 32px;
  153.     margin: 0px;
  154.     padding: 0px;
  155.     overflow: hidden;
  156.     font-size: 26px;
  157.     font-weight: normal;
  158.     letter-spacing: -0.5px;
  159. }
  160.  
  161. /* Just around auto-download */
  162. #auto-download {
  163.     position: absolute;
  164.     bottom: 30px;
  165.     left: 98px;
  166.     display: block;
  167.     height: 20px;
  168.     color: #FFFFFF;
  169.     padding: 0px;
  170.     margin: 0px 0 2px 0px;
  171.     text-transform: uppercase;
  172.     font-size: 11px;
  173.     font-weight: bold;
  174.     z-index: 2;
  175. }
  176.  
  177. #auto-download-menu {
  178.     font-weight: normal;
  179. }
  180.  
  181. #auto-label {
  182.     float: left;
  183.     padding-right: 6px;
  184.     padding-top: 1px;
  185. }
  186.  
  187. /* Search box */
  188. #search-box-container {
  189.     position: absolute;
  190.     bottom: 10px;
  191.     left: 98px;
  192. }
  193.  
  194. #search-box {
  195.     color: #333;
  196.     font-size: 12px;
  197.     width: 121px;
  198. }
  199.  
  200. /* The right side of the titlebar (visit website, settings, etc). */
  201. .main-titlebar-right {
  202.     position: absolute;
  203.     top: 9px;
  204.     right: 16px;
  205. }
  206.  
  207. .main-titlebar-right a {
  208.     color: #fff;
  209. }
  210.  
  211. .main-titlebar-right li {
  212.      margin-bottom: 10px;
  213. }
  214.  
  215. /* Download page titlebar components */
  216. #downloads-global-actions {
  217.     font-size: 10px;
  218.     position: absolute;
  219.     top: 24px;
  220.     right: 5px;
  221.     text-align: center;
  222. }
  223.  
  224. #downloads-global-actions div {
  225.     display: block;
  226.     float: left;
  227.     width: 100px;
  228.     height: 45px;
  229.     overflow: hidden;
  230. }
  231.  
  232.  
  233. #downloads-global-actions a {
  234.     color: #fff;
  235.     text-decoration: none;
  236.     font-size: 10px;
  237.  
  238. }
  239.  
  240. #download-info {
  241.     position: absolute;
  242.     top: 14px;
  243.     right: 195px;
  244.     font-size: 11px;
  245. }
  246.  
  247. .download-rates {
  248.     margin: 10px 0px 0px 0px;
  249. }
  250.  
  251. /* Search page components */
  252. #engine-search {
  253.     position: absolute;
  254.     left: 98px;
  255.     top: 40px;
  256.     text-align: left;
  257.     overflow: hidden;
  258. }
  259.  
  260. #engine-search input, #engine-search select {
  261.     font-size: 11px;
  262. }
  263.  
  264. /* CSS for our popup select boxes */
  265.  
  266. .select-box-right {
  267.     background: right top no-repeat url(../images/auto-select-box-right.png);
  268. }
  269.  
  270. .select-box-left {
  271.     background: left top no-repeat url(../images/auto-select-box-left.png);
  272.     float: left;
  273.     cursor: pointer;
  274.     -khtml-user-select: none;
  275.     -moz-user-select: none;
  276. }
  277.  
  278. .select-box-mid {
  279.     background: left top repeat-x url(../images/auto-select-box-mid.png);
  280.     margin: 0px 16px 0px 6px;
  281.     padding: 1px 7px 1px 3px;
  282.     height: 19px;
  283.     color: #333;
  284.     font-size: 11px;
  285. }
  286.  
  287. .select-box-menu {
  288.     border: 1px solid #AAA;
  289.     background: #f6f6f6;
  290.     margin: 0px;
  291.     position: relative;
  292.     top: -45px;
  293.     display: none;
  294. }
  295.  
  296. .auto-download .select-box-menu {
  297.     width: 250px;
  298.     left: 0px;
  299.     top: -25px;
  300.     padding: 6px 0 6px 0;
  301. }
  302.  
  303. .select-box-menu li {
  304.     list-style: none;
  305. }
  306.  
  307. .select-box-menu a {
  308.     text-decoration: none;
  309.     color: #000;
  310.     display: block;
  311.     text-transform: none;
  312.     margin: 0px;
  313.     padding: 2px 9px 2px 12px;
  314.     font-size: 12px;
  315. }
  316.  
  317. .select-box-menu a:hover {
  318.     background: #2673c9;
  319.     color: white;
  320. }
  321.  
  322. /* Used for scraping indicator on channel page */
  323. .main-container-scraping {
  324.     text-align: center;
  325.     margin: 15px 0px;
  326.     padding: 0px;
  327. }
  328.  
  329. /* this goes in the main-container-scraping section */
  330. .scraping-indicator {
  331.     margin: auto;
  332.     width: 600px;
  333.     height: 56px;
  334.     background: #efefef;
  335.     font-size: 18px;
  336.     color: #085ffe;
  337.     font-weight: bold;
  338.     white-space: nowrap;
  339.     margin-top: 18px;
  340.     position:relative;
  341. }
  342.  
  343. /* this goes around the text of the scraping section */
  344. .scraping-content {
  345.     position: absolute;
  346.     left: 20px;
  347.     bottom: 16px;
  348. }
  349.  
  350. /* This holds everything below the channel bar*/
  351. #main-container {
  352.     position: absolute;
  353.     padding-top: 0px;
  354.     top: 90px;
  355.     width: 100%;
  356.     /*
  357.     It would be nice to include these next two lines.  This would make the
  358.     scrollbars only affect the items in a channel, not it's header too.  The
  359.     problem is it causes the div to scroll to the top whenever we change an
  360.     item on ubuntu at least, possibly OS X too.
  361.  
  362.     bottom: 0px;
  363.     overflow: auto;
  364.      */
  365. }
  366.  
  367.  
  368. /* SORT BUTTONS AND VIDEO STATS -- THEY ARE GROUPED TOGETHER IN THE CSS SINCE THEY NEED TO LINE UP WITH EACH OTHER */
  369. .sort-buttons {
  370.     font-size: 11px;
  371.     color: #113;
  372.     background-color: #4dc44b;    
  373.     position: relative;
  374.     height: 17px;
  375.     padding-top: 4px;
  376.     padding-left: 122px;
  377. }
  378.  
  379. .static-tab-sort .sort-buttons {
  380.     background-color: #333;
  381. }
  382.  
  383.  
  384. .available-sort .sort-buttons {
  385.     background-color: #5faeff;    
  386. }
  387.  
  388. .downloading-sort .sort-buttons {
  389.     background-color: #FF8c2d;
  390. }
  391.  
  392. .main-video-details-top {
  393.     color:  #222;
  394.     font-size: 10px;
  395.     height: 15px;
  396.     padding-bottom: 3px;
  397.     overflow: hidden;
  398.     border-bottom: 1px solid #e1e9f6;
  399.     width: 100%;
  400. }
  401.  
  402. .video-stats div {
  403.     float: left;
  404.     padding-top: 3px;
  405.     height: 15px;
  406. }
  407.  
  408. a.sort-button {
  409.     color: white;
  410.     text-decoration: none;
  411.     display: block;
  412.     float: left;
  413. }
  414.  
  415. .sort-buttons-right {
  416.     width: 315px;
  417.     float: right;
  418. }
  419.  
  420. .length {
  421.     width: 65px;
  422. }
  423.  
  424. .date {
  425.     width: 80px;
  426. }
  427.  
  428. .size {
  429.     width: 50px;
  430. }
  431.  
  432.  
  433. .torrent {
  434.     width: 60px;
  435. }
  436.  
  437.  
  438. .details-link {
  439.     padding-top: 1px;
  440.     float: right;
  441. }
  442.  
  443. .details-link a {
  444.     text-decoration: none;
  445.     color: #3263A0;
  446.     font-size: 10px;
  447. } 
  448.  
  449. .details-link a img {
  450.     vertical-align: -4px;
  451. }
  452.  
  453.  
  454. a.sort-button img {
  455.     border: none;
  456.     padding-left: 3px;
  457.     vertical-align: 0px;
  458.     display: none;
  459. }
  460.  
  461. a.sort-button.ascending img.up-arrow {
  462.     display: inline;
  463. }
  464.  
  465. a.sort-button.descending img.down-arrow {
  466.     display: inline;
  467. }
  468.  
  469. /* The section dividers */
  470.  
  471. .main-channelbar {
  472.     background-color: #B9CDFF;
  473.     border-top: 1px solid white;
  474.     height: 22px;
  475.     display: block;
  476.     overflow: hidden;
  477.     color: #111;
  478.     text-decoration: none;
  479.     font-size: 15px;
  480.     font-weight: normal;
  481.     padding-top: 4px;
  482.     color: #fff;
  483.     cursor: pointer;
  484. }
  485.  
  486. .main-channelbar.no-arrow {
  487.     padding-left: 12px;
  488.     cursor: default;
  489. }
  490.  
  491.  
  492. .available-channelbar-wrap {
  493.     position: relative;
  494. }
  495.  
  496. .available-channelbar {
  497.         background-color: #2f8efe;
  498.         background: url(../images/available-bar-bg.png);
  499. }
  500.  
  501. .available-channelbar:hover {
  502.         background: none;
  503.         background-color: #2f8efe;
  504. }
  505.  
  506. .downloaded-channelbar {
  507.         background-color: #15ae12;
  508.         background: url(../images/downloaded-bar-bg.png);
  509. }
  510.  
  511. .downloaded-channelbar:hover {
  512.         background: none;
  513.         background-color: #15ae12;
  514. }
  515.  
  516. .downloading-channelbar {
  517.         background: #DF6c0d url(../images/downloading-bar-bg.png);
  518. }
  519.  
  520. .downloading-channelbar:hover {
  521.         background-color: #FF8c2d;
  522. }
  523.  
  524. .main-channelbar.seeding-channelbar {
  525.         background-image: url("../images/download-channelbar-bg.png");
  526. }
  527.  
  528. a.download-bar-action {
  529.     float: right;
  530.     font-size: 10px;
  531.     color: #fff;
  532.     margin: 2px 12px 0px 0px;
  533. }
  534.  
  535. a.download-bar-action:hover {
  536.     text-decoration: underline;
  537. }
  538.  
  539. .clear-completed-link {
  540.     text-decoration: underline; 
  541.     margin-left: 15px; 
  542.     font-weight: normal;
  543.     color: #fff;
  544.     font-size: 11px;
  545.     margin-top: -1px;
  546. }
  547.  
  548. /* triangle for the bars */
  549. .triangle {
  550.     background: url(../images/triangle-right.png) no-repeat left top;
  551.     float: left;
  552.     width: 15px;
  553.     height: 16px;
  554.     margin: 4px 1px 0px 8px;
  555. }
  556.  
  557. .triangle.down {
  558.     background: url(../images/triangle-down.png) no-repeat left top;
  559. }
  560.  
  561. /* The N more videos oval */
  562. .main-notification {    
  563.     float: left;
  564.     display: block;
  565.     height: 24px;
  566.     background: url(../images/main-notification-bg.png) no-repeat left top;
  567.     padding: 3px 0px 0px 20px;
  568.     margin: 15px 0px 12px 35px;
  569.     font-size: 14px;
  570.     font-weight: bold;
  571.     text-decoration: none;
  572.     color: #ffffff;
  573. }
  574. .main-notification-right {  
  575.     float: left;
  576.     display: block;
  577.     width: 20px;
  578.     height: 24px;
  579.     margin: 15px 0px 12px 0px;
  580.     text-decoration: none;
  581.     background: url(../images/main-notification-right.png) no-repeat right top;
  582.     overflow: hidden;
  583. }
  584.  
  585.  
  586. /* Used in playlist and playlist-folder */
  587. .playlist-end-drag-hitbox {
  588.     height: 10px;
  589.     width: 100%;
  590. }
  591. .playlist-end-drag-hitbox.drag-highlight {
  592.     border-top: 1px solid #0752d7;
  593. }
  594.  
  595. /* used in search view */
  596. .search-message {
  597.     font-size: 28px;
  598.     color:      #666;
  599.     text-align: center;
  600.     margin-top: 50px;
  601. }
  602.  
  603. .search-results-bar {
  604.     font-size: 18px;
  605.     color: white;
  606.     background: #056de1;
  607.     padding: 5px 10px;
  608.     height: 22px;
  609.     text-align: center;
  610. }
  611.  
  612. #results-text {
  613.     float: left;
  614. }
  615.  
  616. /* Around  the "empty folder" message */
  617. .channel-blank {
  618.     text-align: center;
  619.     margin-top: 110px;
  620.     padding: 30px;
  621. }
  622. .channel-message {
  623.     font-size: 28px;
  624.     color:      #666;
  625.     text-align: center;
  626.     margin-top: 50px;
  627.     font-weight: bold;
  628. }
  629. .channel-message.small {
  630.     font-size: 20px;
  631.     margin-top: 20px;
  632.     font-weight: normal;
  633. }
  634. .drag-highlight .channel-message {
  635.     color: #0752d7;
  636. }
  637.  
  638. /* used in multi-channel */
  639. body.gray-background {
  640.     background-color: #f7f7f7;
  641. }
  642. .button-zone-two {
  643.     margin: 0 auto 0 auto;
  644.     text-align: center;
  645.     width: 500px;
  646. }
  647. .button-zone-one {
  648.     margin: 0 auto 0 auto;
  649.     text-align: center;
  650.     width: 270px;
  651. }
  652. .gray-button-wrap {
  653.     margin-right: 10px;
  654.     float: left;
  655. }
  656. .gray-button-bg {
  657.     background: url(../images/graybutton-mid.png) top left repeat-x;
  658.     margin: 0 8px;
  659.     height: 31px;
  660.     cursor: pointer;
  661.     margin: auto;
  662.     width: 240px;
  663. }
  664. .gray-button-left {
  665.     background: url(../images/graybutton-left.png) top left no-repeat;
  666.     width: 8px;
  667.     height: 31px;
  668.     float: left;
  669. }
  670. .gray-button-right {
  671.     background: url(../images/graybutton-right.png) top left no-repeat;
  672.     width: 8px;
  673.     height: 31px;
  674.     float: right;
  675. }
  676. .gray-button-content {
  677.     padding-top: 8px;
  678. }
  679.  
  680. /* Everything below is used in download-item */
  681. .main-video {
  682.     border-top: 1px solid #f0fcfe;
  683.     border-bottom: 1px solid #d5ddea;
  684.     background: url(../images/main-video-bg.png) repeat-x #e5edf5;
  685.     height: 90px;
  686.     width: 100%;
  687.     position: relative;
  688. }
  689.  
  690. .main-video.more-info {
  691.     height: auto;
  692. }
  693.  
  694. /* This is the line that appears when you reorder items. When
  695. an element is dragged, the drag-highlight class is added to it */
  696. .main-video .dnd-reorder-line {
  697.         position: absolute;
  698.         top: -1px;
  699.         height: 2px;
  700.         width: 100%;
  701.         background: #0752d7;
  702.         display: none;
  703. }
  704. .main-video.drag-highlight .dnd-reorder-line {
  705.     display: block;
  706. }
  707.  
  708. /* These change the background based on whether or not it's selected */
  709. .main-video.selected 
  710. {
  711.     background: #5E8BDE url(../images/main-video-bg-selected.png) repeat-x left top;
  712.     color: black; 
  713. }
  714.  
  715. .main-video.selected {
  716.     border-top: 1px solid #d5ddff;
  717.     border-bottom: 1px solid #8fc1f7;
  718. }
  719.  
  720. .main-video.selected-inactive, .main-video-details.selected-inactive  {
  721.     background: #ccc;
  722. }
  723.  
  724. .main-video-tnail {
  725.     position: absolute;
  726.     left: 5px;
  727.     top: 3px;
  728.     width: 108px;
  729.     height: 81px;
  730.     border: 1px solid #fff;
  731. }
  732.  
  733. .selected .main-video-tnail {
  734.     border: 2px solid #0067DF;
  735.     position: absolute;
  736.     left: 4px;
  737.     top: 2px;
  738. }
  739.  
  740.  
  741. .more-info .main-video-tnail {
  742.     width: 226px;
  743.     height: 170px;
  744. }
  745.  
  746. .main-video-desc {
  747.     position: relative;
  748.     margin-left: 122px;
  749.     padding-right: 19px;
  750.     padding-top: 5px;
  751.     height: 84px;
  752.     overflow: hidden;
  753.     border-right: 1px solid #e1e9f6;
  754.     margin-right: -1px; /* Make the border overlap with main-video-details */
  755. }
  756.  
  757. .more-info .main-video-desc {
  758.     margin-left: 240px;
  759.     height: auto;
  760.     min-height: 175px;
  761. }
  762.  
  763. .main-video-desc h1 {
  764.     margin: 0px;
  765.     padding: 0px;
  766.     font-size: 13px;
  767.     font-weight: bold;
  768.     color: #222;
  769.     text-decoration: none;
  770.     height: 18px;
  771.     overflow: hidden;
  772. }
  773.  
  774. .main-video-desc div {
  775.     font-size: 11px;
  776.     line-height: 15px;
  777. }
  778.  
  779. .main-video-desc-desc {
  780.     color: #222;
  781.     height: 63px;
  782.     overflow: hidden;
  783. }
  784.  
  785. .more-info .main-video-desc-desc {
  786.     height: auto;
  787. }
  788.  
  789. .main-video-bottom { 
  790.     position: absolute;
  791.     left: 0px;
  792.     width: 100%;
  793.     bottom: 0px;
  794.     /* 
  795.      * Make the main-video-bottom cover the description.  We need to set the
  796.      * background to do this, otherwise both will show.  This is sort of a
  797.      * hack -- it works because more-info is not set, so main-video-bottom
  798.      * will only be 1 line 
  799.      */
  800.     background: url(../images/main-video-bg.png) repeat-x;
  801.     background-position: 0px -70px;
  802.     font-size: 12px;
  803.     padding: 4px 0px;
  804. }
  805.  
  806. .selected .main-video-bottom { 
  807.     background-image: url(../images/main-video-bg-selected.png);
  808. }
  809.  
  810. .more-info .main-video-bottom {
  811.     position: static;
  812.     margin-top: 3px;
  813.     background: none;
  814. }
  815.  
  816. .donate-html {
  817.     display: none;
  818. }
  819.  
  820. .more-info .donate-html {
  821.     margin-top: 5px;
  822.     display: block;
  823. }
  824.  
  825. .channel-title {
  826.     text-align: right;
  827.     color: #666;
  828.     line-height: 130%;
  829.     height: 1.3em;
  830.     overflow: hidden;
  831.     margin-right: 5px;
  832. }
  833.  
  834. .hide-channel-title .channel-title {
  835.     display: none;
  836. }
  837.  
  838. .main-video.selected .main-video-desc h1, .main-video.selected .main-video-desc-desc, .main-video.selected .channel-title {
  839.     color: black; 
  840. }
  841.  
  842. .main-video-desc p {
  843.     display: inline;
  844.     padding: 0px;
  845.     margin: 0px;
  846. }
  847. .main-video-desc p br {
  848.     display: inline;
  849.     padding: 0;
  850.     margin: 0;
  851.     height: 0;
  852. }
  853.  
  854.  
  855. .main-video-desc a:link, .main-video-desc a:active, .main-content a:link, .main-content a:active {
  856.     color: #333;
  857.     text-decoration: underline;
  858. }
  859.  
  860. .main-video-desc a:hover, .main-content a:hover {
  861.     color: #4181e0;
  862. }
  863.  
  864. .main-video-desc a:visited, .main-content a:visited {
  865.     color: #666666;
  866.     text-decoration: underline;
  867. }
  868.  
  869. .main-video.selected .main-video-desc a:link {
  870.     color: black; 
  871. }
  872.  
  873. .main-video-hitbox {
  874.     position: absolute;
  875.     left: 6px;
  876.     top: 4px;
  877.     width: 108px;
  878.     height: 81px;
  879. }
  880.  
  881. .more-info .main-video-hitbox {
  882.     width: 226px;
  883.     height: 170px;
  884. }
  885.  
  886. .main-video-hitbox a, .main-video-hitbox span {
  887.     display: block;
  888.     width: 100%;
  889.     height: 100%;
  890. }
  891.  
  892. .main-video-hitbox .icon {
  893.     background: no-repeat bottom right;
  894. }
  895.  
  896. .main-video-hitbox .download {
  897.     background-image: url(../images/main-video-download.png);
  898. }
  899.  
  900. .main-video-hitbox .paused-circle {
  901.     background-image: url(../images/main-video-paused.png);
  902. }
  903.  
  904. .main-video-hitbox .play {
  905.     background-image: url(../images/main-video-play.png);
  906. }
  907.  
  908. .main-video-hitbox .inprogress-background {
  909.     background-image: url(../images/main-video-inprogress.png);
  910. }
  911.  
  912. .main-video-hitbox .download-pending-icon {
  913.     display: block;
  914.     position: absolute;
  915.     bottom: 7px;
  916.     right: 7px;
  917.     width: 15px;
  918.     height: 15px;
  919. }
  920.  
  921. .main-video-hitbox .inprogress-arrows {
  922.     display: block;
  923.     position: absolute;
  924.     bottom: 3px;
  925.     right: 5px;
  926.     width: 19px;
  927.     height: 19px;
  928. }
  929.  
  930. .item-links {
  931.     position: absolute;
  932.     bottom: 4px;
  933. }
  934.  
  935. .main-video-details {
  936.     position: relative;
  937.     float: right;
  938.     width: 315px;
  939.     height: 90px;
  940.     padding: 0px 0 0 8px;
  941.     border-left: 1px solid #e1e9f6;
  942. }
  943.  
  944. .more-info .main-video-details {
  945.     height: auto;
  946. }
  947.  
  948. .main-video-details-main {
  949.     position: relative;
  950.     height: 75px;
  951. }
  952.  
  953. .share-box {
  954.     position: absolute;
  955.     top: 26px;
  956.     left: 2px;
  957. }
  958.  
  959. .share-box .select-box-right {
  960.     background-image: url(../images/share-right.png); 
  961. }
  962.  
  963. .share-box .select-box-mid {
  964.     margin-right: 21px;
  965. }
  966.  
  967. .share-menu {
  968.     position: absolute;
  969.     top: 46px;
  970.     z-index: 10;
  971. }
  972.  
  973. .share-menu img {
  974.     vertical-align: -3px;
  975.     margin-right: 3px;
  976. }
  977.  
  978.  
  979. .details-buttons-right {
  980.     float: right;
  981.     margin-right: 8px;
  982. }
  983.  
  984. .save-button-container {
  985.     margin: 13px 0px;
  986.     height: 17px;
  987. }
  988.  
  989. .round-button-left {
  990.     display: block;
  991.     background: url(../images/round-button-left.png) top left no-repeat;
  992.     padding-left: 7px;
  993. }
  994.  
  995. .round-button-right {
  996.     background: url(../images/round-button-right.png) top right no-repeat;
  997.     padding-right: 7px;
  998. }
  999.  
  1000. .round-button-content {
  1001.     background: url(../images/round-button-mid.png) top left repeat-x;
  1002.     height: 11px;
  1003.     padding: 3px 0px;
  1004.     font-size: 9px;
  1005.     text-align: center;
  1006. }
  1007.  
  1008. a.round-button-left {
  1009.     text-decoration: none;
  1010.     color: #333;
  1011. }
  1012.  
  1013. .round-button-left.delete, .round-button-left.save {
  1014.     width: 54px;
  1015. }
  1016.  
  1017. /* See also download.css */
  1018. .round-button-left.stop-seeding {
  1019.     position: absolute;
  1020.     top: 47px;
  1021.     right: 95px;
  1022.     display: none;
  1023. }
  1024.  
  1025. .round-button-left.black {
  1026.     background-image: url(../images/black-button-left.png);
  1027.     width: 100px;
  1028.     padding-left: 13px;
  1029. }
  1030.  
  1031. .round-button-right.black {
  1032.     background-image: url(../images/black-button-right.png);
  1033.     padding-right: 13px;
  1034. }
  1035.  
  1036. .round-button-content.black {
  1037.     background-image: url(../images/black-button-mid.png);
  1038. }
  1039.  
  1040. a.round-button-left.black {
  1041.     color: #fff;
  1042. }
  1043.  
  1044.  
  1045. .saved-note {
  1046.     margin-top: 7px;
  1047.     font-size: 9px;
  1048.     color: #666;
  1049.     text-align: center;
  1050. }
  1051.  
  1052. .details-date {
  1053.     font-weight: bold;
  1054. }
  1055.  
  1056. .video-state {
  1057.     font-weight: bold;
  1058.     height: 18px;
  1059.     color: white;
  1060.     margin: 0 0 5px 0;
  1061.     position: absolute;
  1062.     top: 28px;
  1063.     right: 95px;
  1064.     font-size: 11px;
  1065. }
  1066.  
  1067. .video-state-left {
  1068.     background: left top no-repeat;
  1069.     height: 18px;
  1070. }
  1071.  
  1072. .video-state-right {
  1073.     background: right top no-repeat;
  1074.     height: 18px;
  1075. }
  1076.  
  1077. .video-state-mid {
  1078.     margin: 0px 5px;
  1079.     padding: 0px 4px 3px 4px;
  1080.     text-align: center;
  1081.     background: left top repeat-x;
  1082. }
  1083.  
  1084. .video-state.new .video-state-left {
  1085.     background-image: url(../images/badge-blue-left.png);
  1086. }
  1087.  
  1088. .video-state.new .video-state-right {
  1089.     background-image: url(../images/badge-blue-right.png);
  1090. }
  1091.  
  1092. .video-state.new .video-state-mid { 
  1093.     background-image: url(../images/badge-blue-mid.png);
  1094. }
  1095.  
  1096. .video-state.newly-downloaded .video-state-left {
  1097.     background-image: url(../images/badge-green-left.png);
  1098. }
  1099.  
  1100. .video-state.newly-downloaded .video-state-right {
  1101.     background-image: url(../images/badge-green-right.png);
  1102. }
  1103.  
  1104. .video-state.newly-downloaded .video-state-mid { 
  1105.     background-image: url(../images/badge-green-mid.png);
  1106. }
  1107.  
  1108.  
  1109. .small-button-left {
  1110.     background: left top no-repeat url(../images/small-button-left.png);
  1111. }
  1112.  
  1113. .small-button-right {
  1114.     background: right top no-repeat url(../images/small-button-right.png);
  1115. }
  1116.  
  1117. .small-button {
  1118.     background: left top repeat-x url(../images/small-button-middle.png);
  1119.     margin: 0px 3px;
  1120.     padding: 3px 3px;
  1121.     height: 17px;
  1122. }
  1123.  
  1124. a.small-button-left {
  1125.     display: block;
  1126.     font-size: 9px;
  1127.     color: #444;
  1128.     text-decoration: none;
  1129. }
  1130.  
  1131. a.small-button-left:hover {
  1132.     color: #000000;
  1133.     text-decoration: underline;
  1134. }
  1135.  
  1136. .white-button-left {
  1137.     background: top left no-repeat url(../images/white-button-left.png);
  1138. }
  1139.  
  1140. .white-button-right {
  1141.     background: top right no-repeat url(../images/white-button-right.png);
  1142. }
  1143.  
  1144. .white-button-middle {
  1145.     height: 20px;
  1146.     margin: 0px 13px;
  1147.     background: top left repeat-x url(../images/white-button-middle.png);
  1148.     padding-top: 3px;
  1149.     font-size: 11px;
  1150. }
  1151.  
  1152. .white-button-middle a:link {
  1153.     color: white;
  1154.     text-decoration: none;
  1155. }
  1156.  
  1157. .white-button-left.save-search-searchpage {
  1158.     float: left;
  1159.     margin-left: 8px;
  1160.     margin-top: 2px;
  1161. }
  1162.  
  1163. .white-button-left.save-search-channel {
  1164.     position: absolute;
  1165.     top: 65px;
  1166.     left: 230px;
  1167.     margin-right: 0px;
  1168. }
  1169.  
  1170.  
  1171. .more-info-details {
  1172.     font-size: 10px;
  1173.     margin-bottom: 4px;
  1174. }
  1175.  
  1176. .more-info-details h3 {
  1177.     font-size: 10px;
  1178.     margin: 0px;
  1179. }
  1180.  
  1181. .more-info-details a {
  1182.     color: #333;
  1183. }
  1184.  
  1185. .more-info-details table {
  1186.     width: 100%;
  1187.     margin: 0px;
  1188. }
  1189.  
  1190. .more-info-details td {
  1191.     vertical-align: top;
  1192. }
  1193.  
  1194. .more-info-details .label {
  1195.     width: 80px;
  1196.     margin-right: 10px;
  1197. }
  1198.  
  1199. .download-status-strings {
  1200.     font-size: 10px;
  1201. }
  1202.  
  1203. .main-video-details-download-info {
  1204.     position: absolute;
  1205.     top: 28px;
  1206.     left: 141px;
  1207.     right: 0px;
  1208.     height: 50px;
  1209.     font-size: 10px;
  1210.     overflow: hidden;
  1211. }
  1212.  
  1213. .main-video-details-expiring {
  1214.     position: absolute;
  1215.     top: 24px;
  1216.     right: 80px;
  1217.     width: 100px;
  1218.     text-align: right;
  1219.     color: #333;
  1220. }
  1221.  
  1222. .main-video-details-pending-auto, .main-video-details-failed-download {
  1223.     position: absolute;
  1224.     top: 48px;
  1225.     right: 20px;
  1226.     width: 200px;
  1227.     text-align: center;
  1228.     overflow: hidden;
  1229. }
  1230.  
  1231. .video-state.downloading, .video-state.paused {
  1232.     width: 130px;
  1233.     padding-top: 4px;
  1234.     padding-left: 5px;
  1235. }
  1236.  
  1237. .download-rate-and-eta {
  1238.     width: 159px;
  1239. }
  1240.  
  1241. .download-rate {
  1242.     float: right;
  1243. }
  1244.  
  1245. .main-video.selected .main-video-details-download-info {
  1246.     color: black;
  1247. }
  1248.  
  1249. .main-progress-bar-bg {
  1250.     width: 120px;
  1251.     height: 15px;
  1252.     margin: 1px 1px 2px 1px;
  1253.     background: url(../images/progress-bar-bg.png) no-repeat left top; 
  1254. }
  1255.  
  1256. .main-progress-bar {
  1257.     height: 15px;
  1258.     background: url(../images/progress-bar.png) no-repeat left top; 
  1259. }
  1260.  
  1261. .main-progress-throbber-bg {
  1262.     width: 120px;
  1263.     height: 15px;
  1264.     margin: 0px 0px 1px 0px;
  1265.     background: url(../images/progress-throbber-bg.png) no-repeat left top; 
  1266. }
  1267.  
  1268. .main-progress-throbber-bg img {
  1269.     margin: 1px;
  1270.     border: 0px;
  1271. }
  1272.  
  1273. .main-progress-cancel {
  1274.     display: block;
  1275.     position: absolute;
  1276.     top: 0px;
  1277.     left: 144px;
  1278.     width: 17px;
  1279.     height: 17px;
  1280.     background: url(../images/video-download-cancel.png) top left no-repeat;
  1281. }
  1282.  
  1283. .main-progress-pause, .main-progress-resume {
  1284.     display: block;
  1285.     position: absolute;
  1286.     top: 0px;
  1287.     left: 124px;
  1288.     width: 17px;
  1289.     height: 17px;
  1290. }
  1291. .main-progress-pause {
  1292.     background: url(../images/video-download-pause.png) top left no-repeat;
  1293. }
  1294.  
  1295. .main-progress-resume {
  1296.     background: url(../images/video-download-resume.png) top left no-repeat;
  1297. }
  1298.